<script setup>
import { ref, defineProps, defineEmits, computed } from 'vue'
import { ElInput } from 'element-plus'

const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: ''
  },
  placeholder: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'text'
  },
  disabled: {
    type: Boolean,
    default: false
  },
  clearable: {
    type: Boolean,
    default: false
  },
  showPassword: {
    type: Boolean,
    default: false
  },
  prefixIcon: {
    type: String,
    default: ''
  },
  suffixIcon: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'change', 'clear'])

const inputValue = computed({
  get: () => props.modelValue,
  set: (value) => {
    emit('update:modelValue', value)
  }
})

const handleFocus = (event) => {
  emit('focus', event)
}

const handleBlur = (event) => {
  emit('blur', event)
}

const handleChange = (value) => {
  emit('change', value)
}

const handleClear = () => {
  emit('clear')
}
</script>

<template>
  <div class="AiInput">
    <div class="AiInputBox">
      <ElInput
          v-model="inputValue"
          :type="type"
          :placeholder="placeholder"
          :disabled="disabled"
          :clearable="clearable"
          :show-password="showPassword"
          :prefix-icon="prefixIcon"
          :suffix-icon="suffixIcon"
          @focus="handleFocus"
          @blur="handleBlur"
          @change="handleChange"
          @clear="handleClear"
          class="AiInputBoxText"
      />
    </div>
    <div class="AiInputBg"></div>
  </div>
</template>

<style scoped lang="scss">
.AiInput {
  user-select: none;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  padding: 2px;
  transition: 0.2s;
  box-shadow: 0 0 5px rgba(19, 141, 255, 0.3);

  &:hover {
    box-shadow: 0 0 10px rgba(19, 141, 255, 0.6);

    .AiInputBg {
      animation-duration: 2s;
      filter: brightness(1.2);
    }
  }

  &:active {
    box-shadow: 0 0 20px rgba(19, 141, 255, 0.6);

    .AiInputBg {
      animation-duration: 2s;
      filter: brightness(1.3);
    }
  }

  .AiInputBox {
    cursor: text;
    border-radius: 30px;
    background-color: #fff;
    width: 100%;
    height: 100%;
    padding: 3px 15px;
    z-index: 1;
    position: relative;

    :deep(.el-input__wrapper) {
      background: transparent;
      box-shadow: none;
      padding: 0;
    }

    :deep(.el-input__inner) {
      border: none;
      outline: none;
      background: transparent;
      font-size: inherit;
      font-family: inherit;
      color: #333;
      height: auto;
      padding: 0;
    }

    // 彩色placeholder实现
    :deep(.el-input__inner::placeholder) {
      color: transparent;
      background-clip: text;
      -webkit-background-clip: text;
      background-image: linear-gradient(138deg,
          #0099ff 37.5%,
          #3366ff 50%,
          #6633ff 62.5%,
          #9933ff 75%,
          #cc00ff 87.5%,
          #ff00ff 100%);
    }

    // 清除图标样式
    :deep(.el-input__suffix) {
      margin-left: 8px;
    }

    :deep(.el-icon) {
      color: #999;
    }
  }

  .AiInputBg {
    z-index: 0;
    position: absolute;
    width: 120%;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg,
        #00ffff 0%,
        #00ffcc 12.5%,
        #00ccff 25%,
        #0099ff 37.5%,
        #3366ff 50%,
        #6633ff 62.5%,
        #9933ff 75%,
        #cc00ff 87.5%,
        #ff00ff 100%);
    animation: AiInputBgRotate 2s linear infinite;
  }
}

@keyframes AiInputBgRotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
